---
title: Portfolio
layout: default
---

<!DOCTYPE html>
<html class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Hux - Timeline</title>
		<link rel="stylesheet" type="text/css" href="css/timeline.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container" style="margin:0;padding:0;width:100%;">
			<header>
				<img width="175" height="175" style="border-radius:50%;" src="/img/avatar-hux-ny.jpg">
				<h1>Hux</h1>
			</header>
			<div class="main">
				<ul class="cbp_tmtimeline">
					<li>
						<div class="cbp_tmlabel">
							<h2 id="boxoffice">Yanshuo.io (演说.io)</h2>
							<time>2016.06</time>
							<img src="images/work-yanshuo.jpg">
							<ul>
								<li>
									"Yanshuo.io" is an online full-featured presentation software to create Web-based slides which are linkable, sharable, cross-platform and without delivery friction. It differentiate from traditional presentation tools such as Powerpoint and Keynote due to its web-friendly and its strong belief in Web.
								</li>
								<li class="skill">
									<span><b>JS</b></span>
									<span class="i-react"></span>
									<span class="link"><a target="_blank" href="https://yanshuo.io">Try it</a></span>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<div class="cbp_tmlabel">
							<h2 id="boxoffice">BoxOffice @Wepiao</h2>
							<time>2015.09</time>
							<img src="images/work-wepiao-bo.jpg">
							<ul>
								<li>
									Wepiao Boxoffice app provides huge amounts of data and visualization of movies and cinemas including times, box office, attendance, ranking with a real-time analyzing back-end, which available on Web, iOS and Android.<br> As the <b>Lead Front-end Developer this project</b>, we built this app in the <a href="https://en.wikipedia.org/wiki/Single-page_application">Single-page Application Model</a> to provide a more fluid user experience with awesome <a href="http://facebook.github.io/react/">React.js</a>
								</li>
								<li class="skill">
									<span class="cbp_tmicon-phone"></span>
									<span><b>JS</b></span>
									<span class="i-react"></span>
									<span class="link"><a target="_blank" href="http://piaofang.wepiao.com">Try it</a></span>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<div class="cbp_tmlabel">
							<h2 id="busyweek">BusyWeek!</h2>
							<time>2015.02</time>
							<img src="images/work-busyweek.jpg">
							<ul>
								<li>
									BusyWeek! is a time-based Todo application, available on Web and Apple App Store, which also support the backup and restore to and from the cloud.<br>
									It's material-designed, truly responsive across platforms and based on modern web technologies including HTML5, CSS3, Sass and powerful <a href="http://vuejs.org">Vue.js</a>.
								</li>
								<li class="skill">
									<span class="cbp_tmicon-phone"></span>
									<span><b>JS</b></span>
									<span class="i-vue"></span>
									<span class="link"><a target="_blank" href="http://huangxuan.me/BusyWeek/dist/">Try it</a></span>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<div class="cbp_tmlabel">
							<h2>Alitrip.com @Alibaba</h2>
							<time>2014 - 2015</time>
							<img src="images/intern-alitrip.jpg">
							<ul>
								<li>
									Alitrip, formerly Taobao Travel, is one of the biggest platform for China's online travel sector, on which there has over 10,000 merchants providing airplane tickets, vacation packages, hotel booking services, visa application services and tour guide services.<br>
									As a <b>Intern Front-End Engineer</b>, I provided mobile-web and hybrid-apps development for our online travel business. Besides, I  contribute to performance, UI rendering optimization and CSS library.
								</li>
								<li class="skill">
									<span class="cbp_tmicon-phone"></span>
									<span><b>JS</b></span>
									<a href="https://github.com/kissyteam/kissy"><span class="i-kissy"></span></a>
									<span class="link"><a target="_blank" href="http://alitrip.com">alitrip.com</a></span>
								</li>
							</ul>
						</div>
					</li>
					<!--<li>
						<div class="cbp_tmlabel">
							<h2>SENOVA WebApp</h2>
							<img src="images/senova.jpg">
							<ul>
								<li>《多媒体交互设计一》结课作业，以北汽“绅宝”为目标品牌，iPad 为主要平台进行的 App 设计，旨在用一种可交互的方式介绍“绅宝”车型。完全采用 Html5 技术开发，可添加至主屏幕离线运行。着力于触控交互体验的优化与优雅的动画设计。</li>
								<li>Responsible : Front-End，Interaction，Product</li>
								<li>Partner : ZOE-张瑜</li>
								<li class="skill">
									<span class="cbp_tmicon-html"></span>
									<span class="fa fa-css3"></span>
									<span><b>JS</b></span>
									<span class="link"><a target="_blank" href="http://huangxuan.me/senova/">Link</a></span>
								</li>
							</ul>
						</div>
					</li>-->
					<li>
						<div class="cbp_tmlabel">
							<h2 id="hslider">jQuery.HSlider</h2>
							<time>2013.10</time>
							<img src="images/work-hslider.jpg">
							<ul>
								<li>
									HSlider, a full-page scrolling, touch-friendly jQuery slider plugin for mobile and modern desktop browser only. All its animations are powered by CSS3 with GPU acceleration and URL sharing with hash is supported.
								</li>
								<li class="skill">
									<span class="fa fa-css3"></span>
									<span><b>JS</b></span>
									<span class="i-jquery"></span>
									<span class="link"><a target="_blank" href="https://github.com/Huxpro/jquery.HSlider">Github</a></span>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<div class="cbp_tmlabel">
							<h2>《真相不止一个》</h2>
							<time>2013.10</time>
							<img src="images/work-truth.jpg">
							<ul>
								<li>Motion Graphic Design, powered by Adobe After Effect and cooperate with amazing artist <a href="https://www.behance.net/psychofish">@Psycho_fish</a></li>
								<li class="skill">
									<span><b>Ae</b></span>
									<span class="cbp_tmicon-video"></span>
									<span class="link"><a target="_blank" href="http://www.tudou.com/programs/view/Xa-pGW55N4g/">View</a></span>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<div class="cbp_tmlabel">
							<h2>Intern @LxU Studio</h2>
							<time>2013.06 - 08</time>
							<img src="images/intern-lxu.jpg">
							<ul>
								<li>
									As a <b>Intern Motion Graphic Designer</b>, I participated in several creative advertising virus videos for our clients including Baidu and Continental.
								</li>
								<li class="skill">
									<span><b>Ae</b></span>
									<span class="cbp_tmicon-video"></span>
									<span class="link"><a target="_blank" href="http://weibo.com/lxustudio">@LxU</a></span>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<div class="cbp_tmlabel">
							<h2>Puzzled Hybrid</h2>
							<time>2013.06</time>
							<img src="images/work-puzzle.png">
							<ul>
								<li> This font is parts of the course work of <b>Design Basis</b>, which mix Serif fonts, Sans-serif fonts and...zebra-stripe! Why I design it like that is still a puzzle to me, and the intro video is available below.
								<li class="skill">
									<span class="cbp_tmicon-font"></span>
									<span><b>Ps</b></span>
									<span><b>Ae</b></span>
									<span class="link"><a target="_blank" href="http://www.tudou.com/programs/view/DtG8SaFAoXU/">View</a></span>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<div class="cbp_tmlabel">
							<h2>Home - UI Design</h2>
							<time>2012.11</time>
							<img src="images/work-uihome.jpg">
							<ul>
								<li>
									Participated in the students team with Huang Yi and Nie Ruijie as the UI Motion Designer. Won the first prize in 7th national IT application competition
								</li>
								<li class="skill">
									<span><b>Fl</b></span>
									<span class="link"><a target="_blank" href="http://animation.cuc.edu.cn/2c90943227f186ba0127f18a7ff10009/view/394">News</a></span>
								</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>
